<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<!-- 2 load the theme CSS file -->
<%@include file="/WEB-INF/jsp/admin/public/cssHeader.jsp"%>
<%@include file="/WEB-INF/jsp/admin/public/jsBottom.jsp"%>
</head>
<body>
	<!-- 3 setup a container element -->
	<div id="jstree">
		<!-- in this example the tree is populated from inline HTML -->
		<ul>
			<c:forEach var="item" items="${resources }">
				<li id="${item.id }">${item.name}<c:if
						test="${item.childBeans != null}">
						<ul>
							<c:forEach var="item1" items="${item.childBeans }">
								<li id="${item1.id }">${item1.name }<c:if
										test="${item1.childBeans != null}">
										<ul>
											<c:forEach var="item2" items="${item1.childBeans}">
												<li id="${item2.id }">${item2.name }</li>
											</c:forEach>
										</ul>
									</c:if>
								</li>
							</c:forEach>
						</ul>
					</c:if>
				</li>
			</c:forEach>
		</ul>
	</div>

	<button id="sure">确定</button>

	<script>
		$(function() {
			// 6 create an instance when the DOM is ready
			$('#jstree').jstree({
				"plugins" : [ "checkbox" ],
				"checkbox": {
					 "three_state": true,//父子级别级联选择
				}
			});

			// 7 bind to events triggered on the tree
			$('#jstree').on("activate_node.jstree", function(e, data) {
				// 节点的id
				console.log(data.node.id);
				// 节点的文本属性
				console.log(data.node.text);
			});
		});

		$("#sure").click(function() {
			var nodes = $("#jstree").jstree(true).get_checked(); //使用get_checked方法 
			$.each(nodes, function(i, n) {
				alert(n);
			});
		});
	</script>
</body>
</html>

